<template>
  <div>
    <LoginHeader/>
    <div class="ys_login_body">
      <!--      登录界面框-->
      <div class="ys_Inter_face">
        <!--        账号登录提示-->
        <div class="ys_login_Account">
          <h2>账号登录</h2>
        </div>
        <div class="info-tips" :style="colorStyle">{{ tipst }}</div>
        <!--     输入账号input框 大   -->
        <div class="ys_login_acc">
          <!--          用户icon-->
          <div class="ys_login_acc_user">
            <i class="el-icon-user"></i>
          </div>
          <!--          input框-->
          <input type="text" v-model="loginInfoVo.userAccount" placeholder="用户名" class="putInAcc">
        </div>
        <!--        输入密码框 大-->
        <div class="ys_login_pwd">
          <!--          密码锁icon-->
          <div class="ys_login_pwd_lock">
            <i class="el-icon-lock"></i>
          </div>

          <!--          输入密码框-->
          <input type="password" v-model="loginInfoVo.password" class="putInPwd" placeholder="密码">
        </div>
        <!--      登录按钮  -->
        <div class="ys_login_btn">
          <button class="login_btn" @click="login">登录</button>
        </div>
        <!--        忘记密码 用户注册-->
        <div class="ys_login_forandreg">

          <a href="javascript:void(0)" @click="forgetPwd" class="ys-login-forgot-password">忘记密码</a>
          <a href="javascript:void(0)" @click="resgister" class="ys-login-register-user">用户注册</a>

        </div>
      </div>

    </div>
    <LoginFooter/>

  </div>
</template>

<script>
import LoginHeader from "../components/LoginHeader";
import LoginFooter from "../components/LoginFooter";
import {publicFun} from "../mixin";
export default {
  name: "ysLogin",
  components: {LoginFooter, LoginHeader},
  data() {
    return {
      loginInfoVo: {
        userAccount: '',
        password: ''
      },
      tipst: "",
      colorStyle: "",
    }
  },
  mixins:[publicFun],
  methods: {
    login: function () {
      if (this.loginInfoVo.userAccount == "") {
        this.tipst = "请输入账号";
        this.colorStyle = "color:red";
      } else if (this.loginInfoVo.password == "") {
        this.tipst = "请输入密码";
        this.colorStyle = "color:red";
      } else {
        this.tipst = "";

        this.$axios
            .get('api/ysmall/ysLogin', {
              params: {
                userAccount: this.loginInfoVo.userAccount,
                password: this.loginInfoVo.password
              }
            })
            .then((res) => {
              console.log(res)
              if (res.data.code === 201) {
                this.tipst = "";
                var vo = res.data;
                console.log(vo)
                console.log(res.data.username);
                this.setCookieValue("token",vo.msg);
                this.setCookieValue("userId",vo.data.userId);
                this.setCookieValue("username",vo.data.username);
                this.setCookieValue("userImg",vo.data.userImg);
                // document.cookie="username="+this.userInfo.data;
                this.$router.push({path: '/shopIndex'})
              } else if (res.data.code === 501) {
                this.tipst = "密码错误,请重新输入";
                this.colorStyle = "color:red";
                alert('密码错误,请重新输入')
              } else if (res.data.code === 505) {
                this.tipst = "登陆失败,手机号不存在";
                this.colorStyle = "color:red";
                alert('用户名错误,请重新输入')
              } else if (res.data.code === 506)
              {
                this.tipst = "登陆失败,邮箱不存在";
                this.colorStyle="color:red";
              }else {
                this.tipst="登陆失败,用户名不存在";
                this.colorStyle="color:red";
              }
            })
            .catch(() => {
              this.tipst="状态异常";
              this.colorStyle="color:red";
            })
      }

    },
    forgetPwd() {
      this.$router.push({path: '/forgetPassword'})
    },
    resgister() {
      this.$router.push({path: '/ysregister'})
    }
  }
}
</script>

<style scoped>
.ys_login_body {
  height: 600px;
  width: 100%;
  /*border: 1px solid black;*/
  /*background-color: #00fc00;*/
  background-image: url("../assets/img/登录界面背景2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.ys_Inter_face {
  position: relative;
  height: 350px;
  width: 350px;
  border: 1px solid rgba(94, 84, 84, 0.3);
  top: 125px;
  left: 400px;
  border-radius: 30px;
  background-color: hsla(0, 0%, 100%, 0.94);
}

.ys_login_Account {
  margin-top: 20px;
  height: 50px;
  width: auto;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-family: "Microsoft Himalaya";
  box-sizing: border-box;
}

.ys_login_Account > h2 {
  text-align: center;
  font-weight: 400;
  color: #019dcc;
}

.ys_login_acc {
  margin-top: 20px;
  height: 40px;
  width: 260px;
  border: 1px solid rgba(163, 156, 156, 0.25);
  position: relative;
}

.ys_login_acc .ys_login_acc_user {
  display: inline-block;
  height: 100%;
  /*border: 1px solid black;*/
  width: 40px;
  background-color: rgba(98, 95, 95, 0.28);
  font-size: 30px;
  text-align: center;
  color: white;
}

.ys_login_pwd {
  margin-top: 20px;
  height: 40px;
  width: 260px;
  border: 1px solid rgba(163, 156, 156, 0.25);
}

.ys_login_pwd .ys_login_pwd_lock {
  display: inline-block;
  height: 100%;
  /*border: 1px solid black;*/
  width: 40px;
  background-color: rgba(98, 95, 95, 0.28);
  font-size: 30px;
  text-align: center;
  color: white;
}

i {
  display: inline-block;
}

.putInAcc, .putInPwd {
  position: absolute;
  height: 38px;
  width: 210px;
  border: none;
  outline: 0 none !important;
  margin-left: 10px;
}

.ys_login_btn {
  height: 40px;
  width: 260px;
  margin-top: 10px;
  /*border: 1px solid black;*/
  border-radius: 20px;
}

.login_btn {
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 5px;
  border: none;
  color: white;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
}

.login_btn:hover {
  background-color: #0075bd;
  color: white;
  border: none;
}

.ys_login_forandreg {
  height: 20px;
  width: 260px;
  margin-top: 40px;
  box-sizing: border-box;
}

.ys-login-forgot-password, .ys-login-register-user {
  display: inline-block;
  text-decoration: none;
  color: #727070;
  font-size: 13px;
  padding-left: 52px;
}

.ys_login_forandreg > a:hover {
  text-decoration: underline;
  color: #0075bd;
}

.ys_login_top > a {
  display: inline-block;
  height: 80px;
  width: 150px;
  /*border: 1px solid black;*/
  margin-top: 10px;
  margin-left: 500px;
  background-image: url("../assets/img/依尚logo.jpg");
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: 300px 200px;
}

.info-tips {
  position: absolute;
  margin-left: 43px;
  margin-top: 5px;
  font-size: 11px;
}
</style>